<template>
  <div>
    <Top></Top>
    <TopType></TopType>
    <BannerRotation></BannerRotation>
    <LiveList class="child"></LiveList>
    <DougaList class="child"></DougaList>
    <AnimeList class="child"></AnimeList>
    <GuoChuangList class="child"></GuoChuangList>
    <CartoonList class="child"></CartoonList>
    <MusicList class="child"></MusicList>
    <DanceList class="child"></DanceList>
    <GameList class="child"></GameList>
    <KnowledgeList class="child"></KnowledgeList>
    <ClassroomList class="child"></ClassroomList>
    <DigitalList class="child"></DigitalList>
    <LifeList class="child"></LifeList>
    <GuichuList class="child"></GuichuList>
    <FashionList class="child"></FashionList>
    <RealtimeinfoList class="child"></RealtimeinfoList>
    <EntertainmentList class="child"></EntertainmentList>
    <SpecialColumnList class="child"></SpecialColumnList>
    <MovieList class="child"></MovieList>
    <TVList class="child"></TVList>
    <CinephileList class="child"></CinephileList>
    <RecordList class="child"></RecordList>
    <RecommendList></RecommendList>
    <RightNav class="rightNav"></RightNav>
    <Footer></Footer>
  </div>
</template>

<script>
  // import RightNav from '../../components/Home/RightNav.vue'
  export default {
    name: 'Home',
    components: {
      Top:() => import("../../components/Home/Top.vue"),
      TopType:() => import("../../components/Home/TopType.vue"),
      BannerRotation:() => import("../../components/Home/BannerRotation.vue"),
      LiveList:() => import("../../components/Home/LiveList.vue"),
      DougaList:() => import("../../components/Home/DougaList.vue"),
      AnimeList:() => import("../../components/Home/AnimeList.vue"),
      GuoChuangList:() => import("../../components/Home/GuoChuangList.vue"),
      CartoonList:() => import("../../components/Home/CartoonList.vue"),
      MusicList:() => import("../../components/Home/MusicList.vue"),
      DanceList:() => import("../../components/Home/DanceList.vue"),
      GameList:() => import("../../components/Home/GameList.vue"),
      KnowledgeList:() => import("../../components/Home/KnowledgeList.vue"),
      ClassroomList:() => import("../../components/Home/ClassroomList.vue"),
      DigitalList:() => import("../../components/Home/DigitalList.vue"),
      LifeList:() => import("../../components/Home/LifeList.vue"),
      GuichuList:() => import("../../components/Home/GuichuList.vue"),
      FashionList:() => import("../../components/Home/FashionList.vue"),
      RealtimeinfoList:() => import("../../components/Home/RealtimeinfoList.vue"),
      EntertainmentList:() => import("../../components/Home/EntertainmentList.vue"),
      SpecialColumnList:() => import("../../components/Home/SpecialColumnList.vue"),
      TVList:() => import("../../components/Home/TVList.vue"),
      CinephileList:() => import("../../components/Home/CinephileList.vue"),
      RecordList:() => import("../../components/Home/RecordList.vue"),
      RecommendList:() => import("../../components/Home/RecommendList.vue"),
      MovieList:() => import("../../components/Home/MovieList.vue"),
      RightNav:() => import("../../components/Home/RightNav.vue"),
      Footer:() => import("../../components/public/Footer.vue")
    },
    data() {
      return {
        index:0
      }
    },
    methods:{
      handleScroll(){
        for(let i=0; i<jquery('.child').length; i++){
          if(jquery('.child').eq(i).offset().top <= (document.documentElement.scrollTop+400)){
            this.index = i
            jquery('.rightNav').find('.tab-item').eq(this.index).addClass("tabitemActive").siblings().removeClass("tabitemActive");
          }else if(jquery('.child').eq(0).offset().top>(document.documentElement.scrollTop+400)){
            jquery('.rightNav').find('.tab-item').removeClass('tabitemActive')
          }
        }
      }
    },
    mounted() {
      window.addEventListener('scroll', this.handleScroll);//添加滚轮滚动事件
    },
    destroyed() {
      window.removeEventListener('scroll', this.handleScroll);   // 离开页面清除（移除）滚轮滚动事件
    }
  }
</script>

<style scoped>
  .tabitemActive{
    background-color: #00a1d6;
    color:#fff;
  }
</style>
